<template>
    <Transition name="fade">
        <div v-if="modelValue" class="more-dialog">
            <div class="more-btn" @click="showMore">查看更多</div>
        </div>
    </Transition>
</template>
<script>
export default {
    name: 'ShowMore',
    emits: ['click'],
    props: {
        modelValue: {
            type: Boolean,
            default: false
        }
    },
    // data() {
    //     isShow: 
    // },
    methods: {
        showMore() {
            this.$emit('click')
            this.$api.user.report({
                uid: localStorage.getItem('uid'),
                page: 1,
                action: 'more',
            })
        }
    }
}
</script>

<style lang="less">
.more-dialog {
  position: fixed;
  bottom: 5vh;
  width: 90vw;
  box-sizing: border-box;
  left: 5vw;
  background-color: #fff;
  padding: 20rem 20rem;
  border-radius: 8rem;
  .more-btn {
    height: 40rem;
    font-size: 16rem;
    background-color: #fc3e5a;
    color: #fff;
    text-align: center;
    line-height: 40rem;
  }
}
</style>